<template>
  <div>
    <el-container>
      <el-header>
        <img src="../assets/img/logo.png" alt="" />
        <h1>小U商城后台管理系统</h1>
        <div class="logout">
          <span><i class="el-icon-user"></i>{{ getUser.username }}</span>
          <el-button @click="logout" type="danger" size="mini">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <a-nav></a-nav>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import aNav from "../components/aNav";
import {mapGetters, mapActions} from 'vuex'
export default {
  data() {
    return {};
  },
  components: {
    aNav,
  },
  computed:{
    ...mapGetters(['getUser'])
  },
  methods:{
    ...mapActions(['getUserInfoAction']),
    logout(){
      this.getUserInfoAction(false)
      this.$router.replace('/login')
    }
  }
};
</script>

<style lang="less" scoped>
img {
  width: 50px;
  height: 50px;
  float: left;
  margin: 15px 10px 0 0;
  border-radius: 10px;
}
h1 {
  float: left;
  line-height: 80px;
  font-size: 24px;
  color: #fff;
  font-weight: 500;
}
.logout{
  float: right;
  span{
    font-size: 20px;
  }
}
.el-header {
  background-color: #333;
  color: #fff;
  line-height: 80px;
  font-size: 24px;
  height: 80px !important;
  letter-spacing: 0.1em;
}
.el-main {
  background-color: #fff;
  color: #333;
  height: 600px !important;
}
</style>
